<template>
  <div class="shop_details">
    <div class="headerBox">
      <!-- 时间 -->
      <div class="updateTime">
        <p>数据更新时间：{{ time }}</p>
        <!--  -->
        <img class="refreshIcon" src="@/assets/three/refreshIcon.png" @click="update()" />
      </div>
      <div ref="headerBox" :class="{isFixed:isFixed}">
        <div class="header">
          <div class="logoBox">
            <img :src="response01.shopLogo" @click="ImgPreview(response01.shopLogo)" />
          </div>
          <div class="rig">
            <div class="titBox">
              <p class="title">{{response01.shopTitle}}</p>
              <p class="category" v-if="response01.categoryNames">{{response01.categoryNames}}</p>
              <p class="category" v-if="!response01.categoryNames">--</p>
            </div>

            <div class="hide">
              <div class="reputation">店铺口碑:{{response01.wordofmouth}}</div>
              <div class="experience">
                <p>商品体验: {{response01.wordofmouth}}</p>
                <p>商家服务: {{response01.serviceattitude}}</p>
                <p>物流体验: {{response01.deliveryspeed}}</p>
              </div>
            </div>
            <p class="slide" v-if="response02">
              30天销量：{{
              format_num(response02.volumeIncr) === ""
              ? "--"
              : format_num(response02.volumeIncr)
              }} &nbsp;&nbsp;&nbsp;30天销售额： {{
              format_num(response02.amount) === ""
              ? "--"
              : format_num(response02.amount)
              }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="contentWrap" :class="{isFixedTop:isFixed}">
      <div class="content">
        <div class="title">数据概览</div>
        <div class="shopData" v-if="response02 && !loading && hasRoot">
          <div>
            <p>
              {{
              format_num(response02.amount) === ""
              ? "--"
              : format_num(response02.amount)
              }}
            </p>
            <p>30天销售额</p>
          </div>
          <div>
            <p>
              {{
              format_num(response02.volumeIncr) === ""
              ? "--"
              : format_num(response02.volumeIncr)
              }}
            </p>
            <p>30天销量</p>
          </div>
          <div>
            <p
              v-if="response02.conversionRatio<1"
            >{{response02.conversionRatio?(response02.conversionRatio*100).toFixed(1)+'%':0}}</p>
            <p v-else>--</p>
            <p>30天转化率</p>
          </div>
          <div>
            <p v-if="response02">
              {{
              format_num(response02.extensionPro) === ""
              ? "--"
              : format_num(response02.extensionPro)
              }}
            </p>
            <p>推广商品数</p>
          </div>
          <div>
            <p v-if="response02">
              {{
              format_num(response02.customerUnitPrice) === ""
              ? "--"
              : format_num(response02.customerUnitPrice).toFixed(2)
              }}
            </p>
            <p>平均客单价</p>
          </div>
          <div>
            <p
              v-if="response02.commissionRate==0||response02.commissionRate"
            >{{response02.commissionRate?(response02.commissionRate*100).toFixed(2)+'%':0}}</p>
            <p v-else>--</p>
            <p>平均佣金率</p>
          </div>
          <div>
            <p>
              {{
              format_num(response02.associatedAuthor)
              }}
            </p>
            <p>关联达人数</p>
          </div>
          <div>
            <p v-if="response02">
              {{
              format_num(response02.associatedVideo)
              }}
            </p>
            <p>关联视频数</p>
          </div>
          <div>
            <p v-if="response02">
              {{
              format_num(response02.associatedlive)
              }}
            </p>
            <p>关联直播数</p>
          </div>
        </div>
        <noPower
          :minLeve="$store.state.userRoot[159][161].ownerMinLevel"
          v-if="!hasRoot&& !loading "
        />
      </div>
      <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
    </div>

    <van-tabs
      v-model="active"
      title-class="tab-name"
      :sticky="true"
      offset-top="2rem"
      :duration="0.1"
      scrollspy
    >
      <van-tab title="基础分析">
        <basicAnalysis />
      </van-tab>
      <van-tab title="商品分析">
        <shopGoodsAnalysis />
      </van-tab>
      <van-tab title="达人分析">
        <shopDetailsAnalysis />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import basicAnalysis from './basicAnalysis.vue';
import shopGoodsAnalysis from './shopGoodsAnalysis.vue';
import shopDetailsAnalysis from './shopDetailsAnalysis.vue';
import PageLoading from '@/component/pageLoading.vue';
export default {
  props: [],
  data() {
    return {
      loading: false,
      fixedVal: 0,
      isFixed: false,
      isFristScroll: false,
      response01: [],
      response02: null,
      active: 0,
      time: '',
      startDate: '',
      endDate: '',
      KindName: '30天',
      hasRoot: true,
    };
  },
  components: { basicAnalysis, shopGoodsAnalysis, shopDetailsAnalysis ,PageLoading},
  computed: {},
  created() {
  },
  mounted() {
    this.time1();
    this.get_data_left01().then(()=>{
      this.$nextTick(()=>{
        window.onscroll = e => {
          this.setHeaderFixed();
        };
      });
    });
    this.get_data_left02();
  },
  watch: {},
  methods: {
    tabScrollFn(callbackPms) {
      //获取tab置顶的参数
      // console.log(callbackPms)
      this.tabIsfixed = callbackPms.isFixed;
    },
    setHeaderFixed() {
      //设置顶部浮动
      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;
        this.fixedVal = elTop;
        this.isFristScroll = true;
      }
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= this.fixedVal) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 小店信息
    get_data_left01() {
      return new Promise((resolve,reject)=>{
        this.$axios({
          method: 'get',
          url: '/api/shop/info',
          params: {
            shopId: this.$route.query.id
          }
        })
          .then(response => {
            if (response.data.code == 0) {
              this.response01 = response.data.data;
            }
            resolve();
          })
          .catch(error => {
            reject();
            console.log(error);
          });
      });
    },
    // 基础数据
    get_data_left02() {
      this.loading = true;
      this.response02 = null;
      this.getTime();
      let that = this;

      this.$axios
        .post('/api/shop/infodata?api-version=2', {
          ShopID: this.$route.query.id,
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate
        })
        .then(response => {
          that.loading = false;
          if (response.data.code == 0) {
            this.response02 = response.data.data;
            console.log(this.response02);
          }
          if (response.data.code == 1003) {
            this.hasRoot = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getTime() {
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
    },
    update() {
      this.get_data_left02();
      this.time1();
    },
    // 时间
    time1() {
      var date = new Date();
      var year = date.getFullYear();
      var mon = date.getMonth() + 1;
      var day = date.getDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      var submitTime = '';
      submitTime += year + '-';
      if (mon >= 10) {
        submitTime += mon + '-';
      } else {
        submitTime += '0' + mon + '-';
      }
      if (day >= 10) {
        submitTime += day;
      } else {
        submitTime += '0' + day;
      }
      submitTime += ' ';
      if (h >= 10) {
        submitTime += h + ':';
      } else {
        submitTime += '0' + h + ':';
      }
      if (m >= 10) {
        submitTime += m + ':';
      } else {
        submitTime += '0' + m + ':';
      }
      if (s > 10) {
        submitTime += s;
      } else {
        submitTime += '0' + s;
      }
      this.time = submitTime;
    },
    // 图片预览（放大）
    ImgPreview(imgurl) {
      ImagePreview({
        images: [imgurl],
        closeable: true
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-tabs__wrap {
  border-bottom: 0.013333rem solid #e5e5e5;
}
.shop_details {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f1f1f1;
  .updateTime {
    position: relative;
    // margin: auto;
    width: 9.2rem;
    height: 0.88rem;
    background-color: #f5f5f5;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    margin-bottom: 0.4rem;
    > p {
      line-height: 0.88rem;
      width: 100%;
      text-align: center;
      font-size: 0.346667rem;
      color: #888888;
    }
    .refreshIcon {
      width: 0.32rem;
      height: 0.32rem;
      // background-color: #fd7f2c;
      position: absolute;
      right: 0.466667rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .headerBox {
    width: 100%;
    padding: 0 0.4rem;
    background-color: #ffff;
    padding-top: 0.4rem;
    box-sizing: border-box;
  }
  .header {
    padding-bottom: 0.4rem;
    display: flex;
    .slide {
      display: none;
    }
    .logoBox {
      width: 1.6rem;
      flex: 0 0 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      overflow: hidden;
      // background-color: #000000;
      margin-right: 0.266667rem;
      img {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
    .rig {
      flex: 1;
      .titBox {
        display: flex;
        .title {
          max-width: 4.6rem;
          // height: 0.413333rem;
          font-size: 0.426667rem;
          font-weight: 600;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .category {
          margin-top: 0.08rem;
          margin-left: 0.12rem;
          padding: 0 .12rem;
          height: 0.5rem;
          line-height: 0.5rem;
          background-color: #fff7ed;
          border-radius: 0.06rem;
          text-align: center;
          font-size: 0.293333rem;
          letter-spacing: 1px;
          color: #555555;
        }
      }
      .reputation {
        font-size: 0.346667rem;
        color: #555555;
        margin: 0.106667rem 0;
      }
      .experience {
        display: flex;
        p {
          margin-right: 0.266667rem;
          font-size: 0.293333rem;
          color: #888888;
        }
      }
    }
  }
  .contentWrap {
    position: relative;
    width: 100%;
    min-height: 7.026667rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 0.4rem;
    margin: 0.186667rem auto;
    &.isFixedTop{
      padding-top: 2.44rem;
    }
    .content {
      height: 100%;
      width: 9.2rem;
      background-color: #ffff;
      .title {
        font-size: 0.4rem;
        color: #222222;
        padding-left: 0.2rem;
        font-weight: 600;
        position: relative;
      }
      .title::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0.1rem;
        display: inline-block;
        width: 0.08rem;
        height: 0.3733rem;
        background-color: #fd7f2c;
        border-radius: 0.1333rem;
      }
      .shopData {
        width: 100%;
        padding-top: 0.933333rem;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        > div {
          width: 33.3%;
          margin-bottom: 0.8rem;
          p {
            text-align: center;

            &:nth-child(1) {
              font-family: DINPro-Medium;
              font-size: 0.453333rem;
              color: #222222;
            }
            &:nth-child(2) {
              font-size: 0.32rem;
              color: #888888;
            }
          }
        }
      }
    }
  }
  .isFixed {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 2.04rem;
    width: 100%;
    z-index: 100;
    background: #fff;
    box-sizing: border-box;
    padding: 0.4rem 0.573333rem;
    border-bottom: 0.186667rem solid #f1f1f1;
    .logoBox {
      width: 1.066667rem;
      flex: 0 0 1.066667rem;
      height: 1.066667rem;
    }
    .slide {
      display: block;
      // text-align: center;
      font-size: 0.293333rem;
      line-height: 0.4rem;
      color: #888888;
      margin-top: 0.133333rem;
    }
    .hide {
      display: none;
    }
  }
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
